/* 1. 重置和归一化 CSS */
/* 重置所有元素的 margin 和 padding，并设置 box-sizing 为 border-box，确保布局稳定 */
* {
  margin: 0; // 去除默认的 margin
  padding: 0; // 去除默认的 padding
  box-sizing: border-box; // 确保边框和内边距包含在尺寸内
}
html,
body,
body *:not(script):not(style) {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

/* 2. 基本排版 */
/* 设置全局字体、字体大小、行高和颜色，确保一致的排版 */
body {
  font-size: 16px; // 全局字体大小
  line-height: 1.5; // 行高，确保文本可读性
  color: #333; // 全局文本颜色
}

/* 定义标题的基本样式，确保它们与普通文本区分开 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold; // 标题加粗
  color: #111; // 标题颜色
}
ul {
  list-style-type: none; /* 移除小圆点 */
}

/* 链接样式，默认无下划线，悬停时有下划线 */
a {
  color: #222; // 链接颜色
  text-decoration: none !important; // 默认无下划线
}

a:hover {
  text-decoration: underline; // 悬停时显示下划线
}

/* 段落的基本样式，定义段落的间距 */
// p {
//     margin-bottom: 1em; // 段落底部间距
// }

/* 3. 基本布局 */
/* 容器的基本样式，居中布局，带内边距 */
.container {
  max-width: 1200px; // 最大宽度
  margin: 0 auto; // 居中对齐
  padding: 0 20px; // 左右内边距
}

/* 行的基本样式，启用 Flexbox，并允许换行 */
.row {
  display: flex; // 使用 Flexbox 布局
  flex-wrap: wrap; // 允许元素换行
}

/* 列的基本样式，定义 Flexbox 的弹性 */
.col {
  flex: 1; // 平均分配空间
  padding: 10px; // 每个列的内边距
}

/* 4. 全局颜色和背景 */
/* 定义全局背景颜色和常用的颜色 */
body {
  background-color: #f8f7f4; // 全局背景颜色
}

.primary-color {
  color: #0066cc; // 主要颜色
}

.primary-background {
  background-color: #0066cc; // 主要背景颜色
  color: white; // 背景色上的文本颜色
}

button {
  border: none;
  background-color: transparent;
}

.button:hover {
  background-color: #005bb5; // 悬停时的按钮背景颜色
}
